<template>
    <div>
        <el-row class="row_box">
            <el-col :span="15" :offset="2">
                <div class="title" @click="toHome">网上书城系统</div>
            </el-col>
            <el-col :span="3">
                <!-- 修改 background-color 为带有透明度的 RGBA 格式 -->
                <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"
                    background-color="rgba(26, 188, 156, 0)" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="home" style="color: #CC9900; font-weight: bold; padding: 0 15px; line-height: 60px;">书城</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="2">
                <el-dropdown @command="handleDownBoxCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                        <el-dropdown-item command="shoppingCart">购物车</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        name: 'Header',
        data() {
            return {
                activeIndex: 'home'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log('handleSelect called with key:', key); // 添加日志输出，方便调试
                try {
                    // 修改为严格相等判断
                    if (key === 'home') {
                        this.$router.push('/home')
                    } else if (key === 'shoppingCart') {
                        this.$router.push('/shoppingCart')
                    }
                } catch (error) {
                    console.error('路由跳转出错:', error);
                }
            },
            handleDownBoxCommand(command) {
                if (command === 'logout') {
                    this.logout();
                } else if (command === 'shoppingCart') {
                    this.$router.push('/shoppingCart');
                } else if (command === 'profile') {
                    this.$router.push('/user');
                }
            },
            logout() {
                this.$message({
                    type:'success',
                    message:'退出成功'
                })
                this.$router.push('/welcome')
            },
            toHome() {
                this.$router.push('/home')
            }
        },
        computed: {
            ...mapState({
                username: (state) => state.username,
            }),
        },
        watch: {
            $route(to,from) {
                if (to.name == 'Home') {
                    this.activeIndex = 'home'
                } else if(to.name == 'ShoppingCart') {
                    this.activeIndex = 'shoppingCart'
                } else {
                    this.activeIndex = ''
                }
            }
        },
    }
</script>

<style scoped>
    .row_box {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important; /* 提高 z-index 值 */
        height: 60px;  /* 确保全局统一 */
    }

    .title {
        letter-spacing: 2px;
        font-size: 25px;
        color: #CC9900;  /* 改为深黄色 */
        float: left;
        font-weight: 600;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 61px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #CC9900;  /* 同步为书城按钮同款深黄色 */
        font-size: 16px;
        line-height: 60px;
        font-weight: bold;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>